﻿<!DOCTYPE html>
<html ng-app="directiveApp">
<head>
    <title></title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <script src="scripts/angular.min.js"></script>
    <!-- 预定义模板 -->
    <script type="text/template" id="listTemplate">
        <ul>
            <li ng-repeat="item in data">{{item.name}}({{item.price | currency}})</li>
        </ul>
    </script>
    <script>
        angular.module("directiveApp", [])
            .directive("unorderedList", function () {
                return {
                    link: function (scope, element, attrs) {
                        scope.data = scope[attrs["unorderedList"]];
                    },
                    restrict: "A",
                    template: function () {
                        return angular.element(document.querySelector("#listTemplate")).html();
                        // 或者：
                        return document.getElementById("listTemplate").innerHTML;
                    }
                }
            })
            .controller("defaultCtrl", function ($scope) {
                $scope.products = [
                    { name: "Apples", category: "Fruit", price: 1.20, expiry: 10 },
                    { name: "Bananas", category: "Fruit", price: 2.42, expiry: 7 },
                    { name: "Pears", category: "Fruit", price: 2.02, expiry: 6 }
                ];
            })
    </script>
</head>
<body>
    <div class="container" ng-controller="defaultCtrl">
        <div class="panel-body">
            <div unordered-list="products">
                This is where the list will go
            </div>
        </div>
    </div>
</body>
</html>
